<div class="dux-index-count ">
    <ul class=" uk-grid ">
        <li class="uk-width-1-2">
            <div class="item item1 ">
                <div class="icon">
                    <i class="fa fa-database"></i>
                </div>
                <div class="info">
                    <div class="count">￥{$saleMoneyMonth}</div>
                    <div class="name">本月佣金</div>
                </div>
            </div>
        </li>
        <li class="uk-width-1-2">
            <div class="item item2 ">
                <div class="icon">
                    <i class="fa fa-database"></i>
                </div>
                <div class="info">
                    <div class="count">￥{$saleMoneyCount}</div>
                    <div class="name">总推广返利</div>
                </div>
            </div>
        </li>
    </ul>
    <br>
    <ul class=" uk-grid ">
        <li class="uk-width-1-2">
            <div class="item item3 ">
                <div class="icon">
                    <i class="fa fa-users"></i>
                </div>
                <div class="info">
                    <div class="count">{$userCount}人</div>
                    <div class="name">直属用户</div>
                </div>
            </div>
        </li>
        <li class="uk-width-1-2">
            <div class="item item1 ">
                <div class="icon">
                    <i class="fa fa-filter"></i>
                </div>
                <div class="info">
                    <div class="count">{$agentCount}人</div>
                    <div class="name">直属推广商</div>
                </div>
            </div>
        </li>
    </ul>

</div>
<br>

<div class="uk-grid">
    <div class="uk-width-1-2">
        <div class="dux-box ">
            <div class="box-header">
                推广佣金
            </div>
            <div class="box-body">
                <p>当月: <span class="uk-text-danger">￥{$saleMoneyMonth}</span></p>
                <p>总额: <span class="uk-text-danger">￥{$saleMoneyCount}</span></p>
                <div class="money-chart"></div>
            </div>
        </div>
    </div>
    <div class="uk-width-1-2">
        <div class="dux-box ">
            <div class="box-header">
                推广人数
            </div>
            <div class="box-body">
                <p>直属用户: <span class="uk-text-danger">{$userCount}</span></p>
                <p>直属推广商: <span class="uk-text-danger">{$agentCount}</span></p>
                <div class="user-chart"></div>
            </div>
        </div>
    </div>
</div>
<br>
<div class="dux-box">
    <div class="box-header">
        年度推广佣金
    </div>
    <div class="box-body">
        <canvas id="stats" height="400" style="height: 400px"></canvas>

    </div>
</div>

<script>
    Do('base', 'chart', 'tpl', function () {

        function showData() {
            var canvas = $('#stats').get(0);
            var ctx = canvas.getContext("2d");
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: {json_encode($statsData.labels)},
            datasets: {json_encode($statsData.datasets)}
        },
            options: {
                //response: true,
                maintainAspectRatio : false
            }
        });
        }
        showData();
    });

</script>